<script lang="ts" setup name="MerchantDialog">
import { MoreFilled } from '@element-plus/icons-vue'
import { FormInstance } from 'element-plus'
import { ColumnProps } from '~/library/components/ProTable/interface'
import { getStoreTypeListAPI } from '~/src/api/common'
import { Dialog } from '~/src/api/interface'
import { Common } from '~/src/api/interface/common'
import { StoreManagement } from '~/src/api/interface/storeManagement'
import { getStoreAPI } from '~/src/api/storeManagement'
import AreaList from '/@/assets/json/pcaCode.json'
import SelectTable from '/@vab/components/SelectTable/index.vue'

const rules = reactive({
  storeName: [{ required: true, message: '门店名称必填' }],
})

const dialogProps = ref<Dialog<Partial<StoreManagement.Merchant>>>({
  title: '新增',
  data: {},
  visible: false,
})

const acceptParams = async (params: Dialog<StoreManagement.Merchant>) => {
  await getStoreTypeList()
  Object.assign(dialogProps.value, params)
  dialogProps.value.visible = true
}

const industryList = ref<Common.IndustryList[]>([])
const CasProps = ref({ label: 'name', value: 'code' })

const getStoreTypeList = async () => {
  const res = await getStoreTypeListAPI({})
  industryList.value = res.data
}

const onRadio = (row: any) => {
  dialogProps.value.data.parentStoreId = row.data.id
  dialogProps.value.data.parentStoreName = row.data.storeName
}

const selectTableRef = ref<InstanceType<typeof SelectTable> | null>(null)
const openSelectTable = (title: string, ix: number) => {
  selectTableRef.value?.acceptParams({
    title,
    isView: false,
    index: ix,
    apiParams: { isGroup: 1 },
    selType: 'radio',
    columns: [
      { type: 'radio', label: '单选', width: 60 },
      { prop: 'id', label: '编码', align: 'left' },
      { prop: 'storeName', label: '名称', align: 'left' },
    ] as ColumnProps<any>[],
    api: getStoreAPI as (params: any) => Promise<any>,
  })
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid: any) => {
    if (!valid) return
    try {
      await dialogProps.value.api!(dialogProps.value.data)
      ElMessage.success({ message: `${dialogProps.value.title}门店成功！` })
      dialogProps.value.getTableList!()
      dialogProps.value.visible = false
    } catch (error) {
      console.log(error)
    }
  })
}
defineExpose({ acceptParams })
</script>

<template>
  <vab-dialog v-model:modelValue="dialogProps.visible" destroy-on-close :title="dialogProps.title + '商户资料'" :width="900">
    <el-form ref="ruleFormRef" label-suffix=" :" label-width="160px" :model="dialogProps.data" :rules="rules">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="dialogProps.data!.userName" disabled />
          </el-form-item>
          <el-form-item label="上级商铺" prop="parentStoreId">
            <el-input v-model="dialogProps.data!.parentStoreName" disabled>
              <template #append><el-button :icon="MoreFilled" @click="openSelectTable('商户选择', 0)" /></template>
            </el-input>
          </el-form-item>
          <el-form-item label="门店名称" prop="storeName">
            <el-input v-model="dialogProps.data!.storeName" clearable />
          </el-form-item>
          <el-form-item label="门店电话" prop="mobile">
            <el-input v-model="dialogProps.data!.mobile" clearable />
          </el-form-item>
          <el-form-item class="w100" label="所属行业" prop="industryId">
            <!-- <el-select class="w100" v-model="dialogProps.data!.industryId" placeholder="请选择行业">
              <el-option v-for="item in industryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select> -->
            <el-cascader
              v-model="dialogProps.data!.industryId"
              check-strictly
              :options="industryList"
              :props="{ label: 'name', value: 'id', emitPath: false }"
            />
          </el-form-item>
          <el-form-item v-if="dialogProps.isService" label="小程序AppID" prop="appId">
            <el-input v-model="dialogProps.data!.appId" clearable />
          </el-form-item>
          <el-form-item v-if="dialogProps.isService" label="有效期" prop="endDate">
            <el-date-picker v-model="dialogProps.data!.endDate" class="w100" type="date" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付账号" prop="payAccount">
            <el-input v-model="dialogProps.data!.payAccount" clearable />
          </el-form-item>
          <el-form-item label="所属区域" prop="areaObject">
            <el-cascader v-model="dialogProps.data!.areaObject" class="w100" :options="AreaList" :props="CasProps" />
          </el-form-item>
          <el-form-item label="门店地址" prop="address">
            <el-input v-model="dialogProps.data!.address" clearable />
          </el-form-item>
          <el-form-item label="门店联系人" prop="linkMan">
            <el-input v-model="dialogProps.data!.linkMan" clearable />
          </el-form-item>
          <el-form-item v-if="dialogProps.isService" label="Redis订阅频道号" prop="channel">
            <el-input v-model="dialogProps.data!.channel" />
          </el-form-item>
          <el-form-item v-if="dialogProps.isService" label="小程序appSecret" prop="appSecret">
            <el-input v-model="dialogProps.data!.appSecret" />
          </el-form-item>

          <el-form-item label="第三方平台URL" prop="syncUrl">
            <el-input v-model="dialogProps.data!.syncUrl" />
          </el-form-item>
          <el-form-item label="是否同步" prop="syncFlag">
            <el-radio-group v-model="dialogProps.data!.syncFlag">
              <el-radio label="是" :value="true" />
              <el-radio label="否" :value="false" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <select-table ref="selectTableRef" @radio="onRadio" />
    <template #footer>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="dialogProps.visible = false">取消</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
